import 'package:environmental_les_app/common/routes/route_names.dart';
import 'package:environmental_les_app/common/style/colours.dart';
import 'package:environmental_les_app/common/widgets/rich_text.dart';
import 'package:flutter_clx_base/flutter_clx_base.dart';

import 'index.dart';

class QueryPage extends GetView<QueryController> {
  const QueryPage({super.key});

  // 主视图
  Widget _buildView() {
    // 演示数据（如果 controller 提供真实数据，可替换）
    final items = List<String>.generate(3, (i) => '北控彭州排水有限公司磁峰镇污水处理厂');

    return SafeArea(
      child: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 顶部空间, 与背景图片叠加
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
              child: Row(
                children: [
                  const Icon(Icons.location_on, color: Colours.appMain),
                  const SizedBox(width: 8),
                  const Text('淮格尔市',
                      style: TextStyle(
                          color: Colours.text254,
                          fontSize: 18,
                          fontWeight: FontWeight.w500)),
                  const Icon(Icons.arrow_drop_down, color: Colours.text254),
                  const Spacer(),
                  GestureDetector(
                    onTap: () {
                      Get.toNamed(AppRoutes.surroundSearchPage);
                    },
                    child: Container(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 6, vertical: 8),
                      decoration: BoxDecoration(
                        gradient: const LinearGradient(
                          colors: [Color(0xFF1870FF), Color(0xFF498FFF)],
                          begin: Alignment.topCenter,
                          end: Alignment.bottomCenter,
                        ),
                        borderRadius: BorderRadius.circular(20),
                        border: Border.all(color: Colours.line9BC3FF, width: 2),
                      ),
                      child: const Row(
                        children: [
                          Icon(Icons.explore, color: Colors.white, size: 18),
                          SizedBox(width: 6),
                          Text('周边查询', style: TextStyle(color: Colors.white)),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),

            // 搜索区
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16),
              child: Row(
                children: [
                  Expanded(
                    child: Container(
                      height: 40,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(6),
                      ),
                      padding: const EdgeInsets.symmetric(horizontal: 12),
                      child: const Row(
                        children: [
                          Icon(Icons.search, color: Colours.text969),
                          SizedBox(width: 8),
                          Expanded(
                              child: Text('在淮格尔旗中搜索',
                                  style: TextStyle(color: Colours.textC9CDD4))),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),

            const SizedBox(height: 10),
            const Padding(
              padding: EdgeInsets.symmetric(horizontal: 16),
              child: RichTextWidget(
                children: [
                  TextSpan(
                      text: '共找到 ',
                      style: TextStyle(color: Colours.text09C, fontSize: 14)),
                  TextSpan(
                      text: '5685',
                      style: TextStyle(
                          color: Colours.appMain,
                          fontSize: 14,
                          fontWeight: FontWeight.bold)),
                  TextSpan(
                      text: ' 个结果',
                      style: TextStyle(color: Colours.text09C, fontSize: 14)),
                ],
              ),
            ),

            const SizedBox(height: 12),

            // 筛选行
            const Padding(
              padding: EdgeInsets.symmetric(horizontal: 16),
              child: Row(
                children: [
                  Expanded(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text('行业',
                            style: TextStyle(
                                color: Colours.appMain, fontSize: 14)),
                        SizedBox(width: 6),
                        Icon(Icons.arrow_drop_down, color: Colours.appMain),
                      ],
                    ),
                  ),
                  SizedBox(width: 12),
                  Expanded(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text('重点排污单位',
                            style: TextStyle(
                                color: Colours.text969, fontSize: 14)),
                        SizedBox(width: 6),
                        Icon(Icons.arrow_drop_down, color: Colours.text969),
                      ],
                    ),
                  ),
                ],
              ),
            ),

            const SizedBox(height: 16),

            // 列表
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16),
              child: Column(
                children: items.map((title) {
                  return Container(
                    margin: const EdgeInsets.only(bottom: 12),
                    padding: const EdgeInsets.all(14),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10),
                      boxShadow: const [
                        BoxShadow(
                            color: Colors.black12,
                            blurRadius: 6,
                            offset: Offset(0, 2))
                      ],
                    ),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(title,
                                  style: const TextStyle(
                                      fontSize: 16,
                                      fontWeight: FontWeight.w600)),
                              const SizedBox(height: 8),
                              Row(
                                children: [
                                  Container(
                                    padding: const EdgeInsets.symmetric(
                                        horizontal: 6, vertical: 2),
                                    decoration: BoxDecoration(
                                      color: Colours.bgF4F7FE,
                                      borderRadius: BorderRadius.circular(4),
                                      border:
                                          Border.all(color: Colours.lineB7C0D7),
                                    ),
                                    child: const Text('污水处理及其再生利用',
                                        style: TextStyle(
                                            color: Colours.appMain,
                                            fontSize: 13)),
                                  ),
                                ],
                              ),
                              const SizedBox(height: 10),
                              const Row(
                                children: [
                                  Icon(Icons.location_on_outlined,
                                      size: 16, color: Colours.text09C),
                                  SizedBox(width: 6),
                                  Expanded(
                                      child: Text('淮格尔旗399 街道',
                                          style: TextStyle(
                                              color: Colours.text09C,
                                              fontSize: 13)))
                                ],
                              ),
                            ],
                          ),
                        ),
                        const SizedBox(width: 8),
                        const Icon(Icons.chevron_right, color: Colours.text254),
                      ],
                    ),
                  );
                }).toList(),
              ),
            ),

            const SizedBox(height: 40),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<QueryController>(
      init: QueryController(),
      id: 'query',
      builder: (_) {
        return Scaffold(
          body: Stack(
            children: [
              Container(
                height: 200,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage(ImageUtils.getImgPath('bg_title_top')),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              _buildView(),
            ],
          ),
        );
      },
    );
  }
}
